<!doctype html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="/res/inspinia/css/bootstrap.min.css" rel="stylesheet">
    <link href="/res/inspinia/font-awesome/css/font-awesome.css" rel="stylesheet">
    <!-- bootstrap-table-->
    <link href="/res/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <!-- blueimp-gallery -->
    <link href="/res/inspinia/css/plugins/blueimp/css/blueimp-gallery.min.css" rel="stylesheet">

    <link href="/res/inspinia/css/animate.css" rel="stylesheet">
    <link href="/res/inspinia/css/style.css" rel="stylesheet">

    <title>凭证</title>
</head>
<body class="mini-navbar fixed-sidebar">
<div id="wrapper">
    <div id="page-wrapper" class="gray-bg">
        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <div class="col-12">
                    <div class="tabs-container">
                        <ul class="nav nav-tabs" role="tablist">
                            <li><a class="nav-link active" data-toggle="tab" href="#tab-detail">单据详情</a></li>
                            <li><a class="nav-link" data-toggle="tab" href="#tab-attach">相关附件</a></li>
                            <li><a class="nav-link" data-toggle="tab" href="#tab-budget">申请明细</a></li>
                            <li th:if="${pzTicket.pz.spendingType==2}"><a class="nav-link" data-toggle="tab"
                                                                          href="#tab-trip">出差信息</a></li>
                            <li th:if="${pzTicket.pz.applyType=='expense'}"><a class="nav-link" data-toggle="tab"
                                                                               href="#tab-money">经费来源</a></li>
                            <li th:if="${pzTicket.pz.applyType=='expense'}"><a class="nav-link" data-toggle="tab"
                                                                               href="#tab-pay">支付方式</a></li>
                            <li th:if="${pzTicket.pz.applyType=='expense' && hasInvoice}"><a class="nav-link" data-toggle="tab"
                                                                               href="#tab-invoice">发票信息</a></li>
                        </ul>
                        <div class="tab-content">
                            <div role="tabpanel" id="tab-detail" class="tab-pane active">
                                <div class="panel-body" style="z-index: -2;">
                                    <div th:if="${pzTicket.templateName=='myPrint1_1'}">
                                        <div th:replace="web/pz/his/print/myPrint1_1::printDiv"></div>
                                    </div>
                                    <div th:if="${pzTicket.templateName=='myPrint1_2'}">
                                        <div th:replace="web/pz/his/print/myPrint1_2::printDiv"></div>
                                    </div>
                                    <div th:if="${pzTicket.templateName=='myPrint1_3'}">
                                        <div th:replace="web/pz/his/print/myPrint1_3::printDiv"></div>
                                    </div>
                                    <div th:if="${pzTicket.templateName=='myPrint1_4'}">
                                        <div th:replace="web/pz/his/print/myPrint1_4::printDiv"></div>
                                    </div>
                                    <div th:if="${pzTicket.templateName=='myPrint1_5'}">
                                        <div th:replace="web/pz/his/print/myPrint1_5::printDiv"></div>
                                    </div>
                                    <div th:if="${pzTicket.templateName=='myPrint2_1'}">
                                        <div th:replace="web/pz/his/print/myPrint2_1::printDiv"></div>
                                    </div>
                                    <div th:if="${pzTicket.templateName=='myPrint2_2'}">
                                        <div th:replace="web/pz/his/print/myPrint2_2::printDiv"></div>
                                    </div>
                                    <div th:if="${pzTicket.templateName=='myPrint2_3'}">
                                        <div th:replace="web/pz/his/print/myPrint2_3::printDiv"></div>
                                    </div>
                                </div>
                            </div>
                            <div role="tabpanel" id="tab-attach" class="tab-pane">
                                <div class="panel-body">
                                    <div class="lightBoxGallery" id="lightBoxGallery">

                                    </div>
                                </div>
                            </div>
                            <div role="tabpanel" id="tab-budget" class="tab-pane">
                                <div class="panel-body"></div>
                            </div>
                            <div role="tabpanel" id="tab-trip" class="tab-pane">
                                <div class="panel-body"></div>
                            </div>
                            <div role="tabpanel" id="tab-money" class="tab-pane">
                                <div class="panel-body"></div>
                            </div>
                            <div role="tabpanel" id="tab-pay" class="tab-pane">
                                <div class="panel-body"></div>
                            </div>
                            <div role="tabpanel" id="tab-invoice" class="tab-pane">
                                <div class="panel-body"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="blueimp-gallery" class="blueimp-gallery">
    <div class="slides"></div>
    <h3 class="title"></h3>
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="close">×</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
</div>
<!-- Mainly scripts -->
<script src="/res/inspinia/js/jquery-3.1.1.min.js"></script>
<script src="/res/inspinia/js/popper.min.js"></script>
<script src="/res/inspinia/js/bootstrap.js"></script>
<script src="/res/inspinia/js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="/res/inspinia/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<!-- Custom and plugin javascript -->
<script src="/res/inspinia/js/inspinia.js"></script>
<script src="/res/inspinia/js/plugins/pace/pace.min.js"></script>
<!-- blueimp gallery -->
<script src="/res/inspinia/js/plugins/blueimp/jquery.blueimp-gallery.min.js"></script>
<!-- bootstrap-table -->
<script src="/res/bootstrap-table/bootstrap-table.min.js"></script>
<script src="/res/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript">
    $().ready(function () {
        $('a[href|="#tab-attach"]').click(function (e) {
            pzDetailObj.loadAttachHandler();
        });
        $('a[href|="#tab-budget"]').click(function (e) {
            pzDetailObj.loadBudgetHandler();
        });
        $('a[href|="#tab-trip"]').click(function (e) {
            pzDetailObj.loadTripHandler();
        });
        $('a[href|="#tab-money"]').click(function (e) {
            pzDetailObj.loadMoneyHandler();
        });
        $('a[href|="#tab-pay"]').click(function (e) {
            pzDetailObj.loadPayHandler();
        });
        $('a[href|="#tab-invoice"]').click(function (e) {
            pzDetailObj.loadInvoiceHandler();
        });
    })
    const pzDetailObj = new Object({
        loadAttach: false,
        loadBudget: false,
        loadTrip: false,
        loadMoney: false,
        loadPay: false,
        loadInvoice: false,
        loadAttachHandler: function () {
            if (!this.loadAttach) {
                this.loadAttach = true;
                $.get(`/pz/his/pzattach/list/[[${ap}]]/[[${mainId}]]`, {}, function (data) {
                    if (data.code == 0) {
                        data.list.map(o => {
                            $('#tab-attach .panel-body .lightBoxGallery').append(`<a href="${o.viewPath}"
                                           title="${o.title}" data-gallery=""><img
                                                src="${o.viewPath}_thumbnail"></a>`)
                        })
                    }
                });
            }
        },
        loadBudgetHandler: function () {
            if (!this.loadBudget) {
                this.loadBudget = true;
                $('#tab-budget .panel-body').append(`<table id="pzDetail_budget_table" class="table table-striped"></table>`);
                let columns = [{
                    title: '#',
                    align: 'center',
                    width: 50,
                    formatter: function (value, row, index) {
                        return index + 1;
                    }
                }, {
                    title: '预算部门',
                    field: 'deptName',
                    width: 200,
                }, {
                    title: '预算项目',
                    field: 'projectName'
                }, {
                    title: '经济分类',
                    field: 'cateName'
                }, {
                    title: '申请金额',
                    field: 'money',
                    formatter: function (value, row, index) {
                        let num = parseFloat(value).toFixed(2);
                        num = parseFloat(num)
                        num = num.toLocaleString();
                        return `¥ ${num}`;
                    }
                }, {
                    title: '费用说明',
                    field: 'remark'
                }]
                if(`[[${pzTicket.pz.applyType}]]`=='expense'){
                    columns.push({
                        title: '票据张数',
                        field: 'paperNum'
                    });
                    columns.push({
                        title: '收款信息',
                        formatter: function (value, row, index) {
                            let bankArr = [];
                            bankArr.push("名称：" + row.receivablesName);
                            bankArr.push("账号：" + row.receivablesAccount);
                            bankArr.push("开户行：" + row.receivablesBank);
                            return bankArr.join("<br/>");
                        }
                    })
                }
                $('#pzDetail_budget_table').bootstrapTable({
                    url: `/pz/his/pzbudget/list/[[${ap}]]/[[${mainId}]]`,
                    formatNoMatches: function () {  //没有匹配的结果
                        return '暂无数据';
                    },
                    columns: columns,
                    responseHandler: function (res) {
                        return res.list;
                    }
                });
            }
        },
        loadTripHandler: function () {
            if (!this.loadTrip) {
                this.loadTrip = true;
                $('#tab-trip .panel-body').append(`<table id="pzDetail_trip_table" class="table table-striped"></table>`);
                let columns = [{
                    title: '#',
                    align: 'center',
                    width: 50,
                    formatter: function (value, row, index) {
                        return index + 1;
                    }
                }, {
                    title: '开始时间',
                    field: 'startTime'
                }, {
                    title: '结束时间',
                    field: 'endTime'
                }, {
                    title: '出发地',
                    field: 'startPlace'
                }, {
                    title: '目的地',
                    field: 'endPlace'
                }, {
                    title: '交通工具',
                    field: 'traffic'
                }, {
                    title: '费用支出单位',
                    field: 'expenseUnit'
                }]
                $('#pzDetail_trip_table').bootstrapTable({
                    url: `/pz/his/pztraffic/list/[[${ap}]]/[[${mainId}]]`,
                    formatNoMatches: function () {  //没有匹配的结果
                        return '暂无数据';
                    },
                    columns: columns,
                    responseHandler: function (res) {
                        return res.list;
                    }
                });
            }
        },
        loadMoneyHandler: function () {
            if (!this.loadMoney) {
                this.loadMoney = true;
                $('#tab-money .panel-body').append(`<table id="pzDetail_money_table" class="table table-striped"></table>`);
                let columns = [{
                    title: '#',
                    align: 'center',
                    width: 50,
                    formatter: function (value, row, index) {
                        return index + 1;
                    }
                }, {
                    title: '资金类型',
                    field: 'moneyTypeName'
                }, {
                    title: '预算项目',
                    field: 'projectName'
                }, {
                    title: '经济分类',
                    field: 'cateName'
                }, {
                    title: '申请金额',
                    field: 'money',
                    formatter: function (value, row, index) {
                        let num = parseFloat(value).toFixed(2);
                        num = parseFloat(num)
                        num = num.toLocaleString();
                        return `¥ ${num}`;
                    }
                }]
                $('#pzDetail_money_table').bootstrapTable({
                    url: `/pz/his/pzmoney/list/[[${ap}]]/[[${mainId}]]`,
                    formatNoMatches: function () {  //没有匹配的结果
                        return '暂无数据';
                    },
                    columns: columns,
                    responseHandler: function (res) {
                        return res.list;
                    }
                });
            }
        },
        loadPayHandler: function () {
            if (!this.loadPay) {
                this.loadPay = true;
                $('#tab-pay .panel-body').append(`<table id="pzDetail_pay_table" class="table table-striped"></table>`);
                let columns = [{
                    title: '#',
                    align: 'center',
                    width: 50,
                    formatter: function (value, row, index) {
                        return index + 1;
                    }
                }, {
                    title: '支付类型',
                    field: 'payTypeName'
                }, {
                    title: '支付单号',
                    field: 'docCode'
                }, {
                    title: '支付票号',
                    field: 'ticketCode'
                }, {
                    title: '金额',
                    field: 'money',
                    formatter: function (value, row, index) {
                        let num = parseFloat(value).toFixed(2);
                        num = parseFloat(num)
                        num = num.toLocaleString();
                        return `¥ ${num}`;
                    }
                }]
                $('#pzDetail_pay_table').bootstrapTable({
                    url: `/pz/his/pzpay/list/[[${ap}]]/[[${mainId}]]`,
                    formatNoMatches: function () {  //没有匹配的结果
                        return '暂无数据';
                    },
                    columns: columns,
                    responseHandler: function (res) {
                        return res.list;
                    }
                });
            }
        },
        loadInvoiceHandler: function () {
            if (!this.loadInvoice) {
                this.loadInvoice = true;
                $('#tab-invoice .panel-body').append(`<table id="pzDetail_invoice_table" class="table table-striped"></table>`);
                let columns = [{
                    title: '#',
                    align: 'center',
                    width: 50,
                    formatter: function (value, row, index) {
                        return index + 1;
                    }
                }, {
                    title: '发票代码',
                    field: 'code'
                }, {
                    title: '发票号码',
                    field: 'number'
                }]
                $('#pzDetail_invoice_table').bootstrapTable({
                    url: `/web/pz/his/pzmain/invoiceList/[[${ap}]]/[[${pzTicket.pz.applyCode}]]`,
                    formatNoMatches: function () {  //没有匹配的结果
                        return '暂无数据';
                    },
                    columns: columns,
                    responseHandler: function (res) {
                        return res.list;
                    }
                });
            }
        }
    })
</script>
</body>
</html>